<template>
  <div>
    <!-- 个人介绍页 -->
    <div class="self">
      <!-- 两个按钮 -->
      <div class="tbtn">
          <van-icon name="setting-o" />
          <van-icon name="setting-o" />
      </div>
      <!-- mine -->
      <van-cell
        title="用户名"
        label="进入店铺>"
        :center="true"
        class="person"
      >
        <van-image
          round
          width="2rem"
          height="2rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          slot='icon'
        />
      </van-cell>
    </div>

    <!-- 店铺公告 -->
    <van-cell center title="店铺公告" label="快来编辑自己的店铺公告吧" >
      <van-icon
          slot="right-icon"
          name="edit"
        />
    </van-cell>

    <!-- 店铺优惠券 -->
    <van-cell center title="店铺折扣" value="设置店铺优惠券" >
      <van-icon
          slot="right-icon"
          name="edit"
        />
    </van-cell>
    
    <!-- 在售/售出 -->
    <van-tabs v-model="active">
      <van-tab title="在售宝贝">内容 1</van-tab>
      <van-tab title="已售出">内容 2</van-tab>
    </van-tabs>
  </div>
</template>

<script>
  export default {
    name:'Shop',
    data(){
      return {
        num:'',
        active:4,
      }
    },
    methods:{
    }
  }
</script>

<style scoped>
  .self{
    height: 140px;
    background: #ff0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .tbtn{
    text-align: right;
    margin-right: 50px;
  }
  .person{
    background: #ff0;
  }
  .van-cell__title{
    text-align: left;
    padding-left: 8px;
  }
</style>
